<template>
  <div class="app-container">

    <div class="filter-container">
      <el-row class="row-bg" justify="center">
        <el-col :span="24" :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="el-col">
          <el-radio-group v-model="radio1" @change="changeRadio">
            <el-radio-button label="0"> 日报表 </el-radio-button>
            <el-radio-button label="3"> 时间段查询 </el-radio-button>
          </el-radio-group>
        </el-col>
        <el-col :span="24" :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="el-col">
          <el-date-picker v-if="radio1 == '3'" v-model="value1" type="datetimerange" :picker-options="pickerOptions"
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" @change="flowDateTimeRange">
          </el-date-picker>
          <el-date-picker v-else v-model="value2" align="right" type="date" placeholder="选择日期"
            :picker-options="pickerOptions" value-format="yyyy-MM-dd" @change="changePicker" />
        </el-col>
        <el-col :span="24" :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="el-col">
          <el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download"
            @click="handleDownload">
            导出
          </el-button>
        </el-col>
      </el-row>
    </div>


    <el-row>
      <el-col v-loading="loading">
        <el-table :data="tableData" fixed stripe :height="['0', '2'].includes(radio1) ? 750 : 680" style="width: 100%"
          :header-cell-style="{ textAlign: 'center' }">
          <el-table-column prop="rtime" label="时间" fixed="left" width="120" />
          <el-table-column label="旧西水东调DN1200" align="center" prop="a1" />
          <el-table-column label="四林DN1400" align="center" prop="a2" />
          <el-table-column label="新西水东调DN1600" align="center" prop="a3" />
          <el-table-column label="QL东部原水" align="center" prop="a4" />
          <el-table-column label="至一期平流池" align="center" prop="a5" />
          <el-table-column label="78平流池" align="center" prop="a6" />
          <el-table-column label="DN2000出厂水" align="center" prop="a7" />
          <el-table-column label="DN1800出厂水" align="center" prop="a8" />
          <el-table-column label="汇水井至一期加矾" align="center" prop="a9" />
          <el-table-column label="78平流池加矾" align="center" prop="a10" />
          <el-table-column label="78平流池加氯" align="center" prop="a11" />
          <el-table-column label="总平流池滤前加氯" align="center" prop="a12" />
          <el-table-column label="滤后加氯" align="center" prop="a13" />
          <el-table-column label="1＃吸水井加氯" align="center" prop="a14" />
          <el-table-column label="2＃吸水井加氯" align="center" prop="a15" />
          <el-table-column label="1#高压进线柜电度" align="center" prop="a16" />
          <el-table-column label="2#高压进线柜电度" align="center" prop="a17" />
          <el-table-column label="1期1#干式变压器电度" align="center" prop="a18" />
          <el-table-column label="1期2#干式变压器电度" align="center" prop="a19" />
          <el-table-column label="2期3#干式变压器电度" align="center" prop="a20" />
          <el-table-column label="2期4#干式变压器电度" align="center" prop="a21" />
          <el-table-column label="1#送水泵电度" align="center" prop="a22" />
          <el-table-column label="2#送水泵电度" align="center" prop="a23" />
          <el-table-column label="3#送水泵电度" align="center" prop="a24" />
          <el-table-column label="4#送水泵电度" align="center" prop="a25" />
          <el-table-column label="5#送水泵电度" align="center" prop="a26" />
          <el-table-column label="6#送水泵电度" align="center" prop="a27" />
          <el-table-column label="8#送水泵电度" align="center" prop="a28" />
          <el-table-column label="办公室总进线电度" align="center" prop="a29" />
          <el-table-column label="机修间电度" align="center" prop="a30" />
          <el-table-column label="停车场充电桩电度" align="center" prop="a31" />
          <el-table-column label="低压照明电度" align="center" prop="a32" />
          <el-table-column label="高压照明电度" align="center" prop="a33" />
          <el-table-column label="一期办公用电电度" align="center" prop="a34" />
          <el-table-column label="一期LNG用电电度" align="center" prop="a35" />
          <el-table-column label="DN1200进水累计" align="center" prop="a36" />
          <el-table-column label="DN1200进水" align="center" prop="a37" />
          <el-table-column label="DN1400进水累计" align="center" prop="a38" />
          <el-table-column label="DN1400进水" align="center" prop="a39" />
          <el-table-column label="DN1600进水累计" align="center" prop="a40" />
          <el-table-column label="DN1600进水" align="center" prop="a41" />
          <el-table-column label="平流池进水流量计读数" align="center" prop="a42" />
          <el-table-column label="平流池进水流量" align="center" prop="a43" />
          <el-table-column label="至一期流量累计" align="center" prop="a44" />
          <el-table-column label="至一期流量" align="center" prop="a45" />
          <el-table-column label="回收水池累计流量" align="center" prop="a46" />
          <el-table-column label="回收水池流量" align="center" prop="a47" />
          <el-table-column label="1#出厂水累计流量" align="center" prop="a48" />
          <el-table-column label="1#出厂水流量" align="center" prop="a49" />
          <el-table-column label="2#出厂水累计流量" align="center" prop="a50" />
          <el-table-column label="2#出厂水流量" align="center" prop="a51" />
          <el-table-column label="原水氨氮" align="center" prop="a52" />
          <el-table-column label="原水总锰" align="center" prop="a53" />
          <el-table-column label="原水浊度" align="center" prop="a54" />
          <el-table-column label="原水PH" align="center" prop="a55" />
          <el-table-column label="原水COD" align="center" prop="a56" />
          <el-table-column label="原水浊度" align="center" prop="a57" />
          <el-table-column label="原水PH" align="center" prop="a58" />
          <el-table-column label="原水氨氮" align="center" prop="a59" />
          <el-table-column label="原水总锰" align="center" prop="a60" />
          <el-table-column label="原水COD" align="center" prop="a61" />
          <el-table-column label="7#沉淀池出水浊度" align="center" prop="a62" />
          <el-table-column label="滤后水浊度" align="center" prop="a63" />
          <el-table-column label="滤后水余氯" align="center" prop="a64" />
          <el-table-column label="1#出厂水浊度" align="center" prop="a65" />
          <el-table-column label="1#出厂水余氯" align="center" prop="a66" />
          <el-table-column label="1#出厂水PH值" align="center" prop="a67" />
          <el-table-column label="2#出厂水浊度" align="center" prop="a68" />
          <el-table-column label="2#出厂水余氯" align="center" prop="a69" />
          <el-table-column label="2#出厂水PH值" align="center" prop="a70" />
          <el-table-column label="1#出厂水压力" align="center" prop="a71" />
          <el-table-column label="2#出厂水压力" align="center" prop="a72" />
          <el-table-column label="滤后汇水渠液位" align="center" prop="a73" />
          <el-table-column label="滤后出水液位" align="center" prop="a74" />
          <el-table-column label="1#回收池液位" align="center" prop="a75" />
          <el-table-column label="2#回收池液位" align="center" prop="a76" />
          <el-table-column label="5#清水池液位" align="center" prop="a77" />
          <el-table-column label="6#清水池液位" align="center" prop="a78" />
          <el-table-column label="7#清水池液位" align="center" prop="a79" />
          <el-table-column label="8#清水池液位" align="center" prop="a80" />
          <el-table-column label="吸水井液位" align="center" prop="a81" />
          <el-table-column label="矾溶液池溶液比重" align="center" prop="a82" />
          <el-table-column label="1#矾溶液池液位" align="center" prop="a83" />
          <el-table-column label="2#矾溶液池液位" align="center" prop="a84" />
          <el-table-column label="3#矾溶液池液位" align="center" prop="a85" />
          <el-table-column label="1#矾液投加量" align="center" prop="a86" />
          <el-table-column label="2#矾液投加量" align="center" prop="a87" />
          <el-table-column label="3#矾液投加量" align="center" prop="a88" />
          <el-table-column label="4#矾液投加量" align="center" prop="a89" />
          <el-table-column label="5#矾液投加量" align="center" prop="a90" />
          <el-table-column label="总矾耗量" align="center" prop="a91" />
          <el-table-column label="单位矾耗" align="center" prop="a92" />
          <el-table-column label="次氯酸钠浓度" align="center" prop="a93" />
          <el-table-column label="1#次氯酸钠储液罐液位" align="center" prop="a94" />
          <el-table-column label="2#次氯酸钠储液罐液位" align="center" prop="a95" />
          <el-table-column label="3#次氯酸钠储液罐液位" align="center" prop="a96" />
          <el-table-column label="4#次氯酸钠储液罐液位" align="center" prop="a97" />
          <el-table-column label="5#次氯酸钠储液罐液位" align="center" prop="a98" />
          <el-table-column label="6#次氯酸钠储液罐液位" align="center" prop="a99" />
          <el-table-column label="7#次氯酸钠储液罐液位" align="center" prop="a100" />
          <el-table-column label="8#次氯酸钠储液罐液位" align="center" prop="a101" />
          <el-table-column label="1#加氯流量" align="center" prop="a102" />
          <el-table-column label="2#加氯流量" align="center" prop="a103" />
          <el-table-column label="3#加氯流量" align="center" prop="a104" />
          <el-table-column label="4#加氯流量" align="center" prop="a105" />
          <el-table-column label="5#加氯流量" align="center" prop="a106" />
          <el-table-column label="6#加氯流量" align="center" prop="a107" />
          <el-table-column label="7#加氯流量" align="center" prop="a108" />
          <el-table-column label="8#加氯流量" align="center" prop="a109" />
          <el-table-column label="总次氯酸钠耗量" align="center" prop="a110" />
          <el-table-column label="单位次氯酸钠耗量" align="center" prop="a111" />
          <el-table-column label="78#加矾累计流量" align="center" prop="a112" />
          <el-table-column label="78#加矾流量" align="center" prop="a113" />
          <el-table-column label="至一期加矾累计流量" align="center" prop="a114" />
          <el-table-column label="至一期加矾流量" align="center" prop="a115" />
          <el-table-column label="沉淀池前加氯累计流量" align="center" prop="a116" />
          <el-table-column label="沉淀池前加氯流量" align="center" prop="a117" />
          <el-table-column label="滤后加氯累计流量" align="center" prop="a118" />
          <el-table-column label="滤后加氯流量" align="center" prop="a119" />
          <el-table-column label="911有功电能表" align="center" prop="a120" />
          <el-table-column label="911有功电能" align="center" prop="a121" />
          <el-table-column label="912有功电能表" align="center" prop="a122" />
          <el-table-column label="912有功电能" align="center" prop="a123" />
          <el-table-column label="1期1#干式变压器有功电能表" align="center" prop="a124" />
          <el-table-column label="1期1#干式变压器有功电能" align="center" prop="a125" />
          <el-table-column label="1期2#干式变压器有功电能表" align="center" prop="a126" />
          <el-table-column label="1期2#干式变压器有功电能" align="center" prop="a127" />
          <el-table-column label="3#干式变压器有功电能表" align="center" prop="a128" />
          <el-table-column label="3#干式变压器有功电能" align="center" prop="a129" />
          <el-table-column label="4#干式变压器有功电能表" align="center" prop="a130" />
          <el-table-column label="4#干式变压器有功电能" align="center" prop="a131" />
          <el-table-column label="1#电机有功电能表" align="center" prop="a132" />
          <el-table-column label="1#电机有功电能" align="center" prop="a133" />
          <el-table-column label="2#电机有功电能表" align="center" prop="a134" />
          <el-table-column label="2#电机有功电能" align="center" prop="a135" />
          <el-table-column label="3#电机有功电能表" align="center" prop="a136" />
          <el-table-column label="3#电机有功电能" align="center" prop="a137" />
          <el-table-column label="4#电机有功电能表" align="center" prop="a138" />
          <el-table-column label="4#电机有功电能" align="center" prop="a139" />
          <el-table-column label="5#电机有功电能表" align="center" prop="a140" />
          <el-table-column label="5#电机有功电能" align="center" prop="a141" />
          <el-table-column label="6#电机有功电能表" align="center" prop="a142" />
          <el-table-column label="6#电机有功电能" align="center" prop="a143" />
          <el-table-column label="8#电机有功电能表" align="center" prop="a144" />
          <el-table-column label="8#电机有功电能" align="center" prop="a145" />
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { exportReportMonthExcel, getReportOneMonthList } from "@/api/water/reportMonth";
import { exportReportYearExcel, getReportOneYearList } from "@/api/water/reportYear";
import { exportReportDay1Excel, getReportOneDay1List } from "@/api/water/reportDay1";
import { formatJson, completion, round, prefixZero } from "@/utils";
import { parseTime } from "@/utils/ruoyi";

let date = new Date();
let value2 =
  date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
export default {
  name: "ReportMonth",
  components: {
  },
  data() {
    return {
      loading: false,
      downloadLoading: false,

      tableData: [],

      radio1: "0",
      value2: value2,
      value1: [],

      pickerOptions: {
        sdisabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
    }
  },
  created() {
    this.tableDay();
  },
  methods: {
    changePicker() {
      this.changeRadio(this.radio1);
    },
    changeRadio(value) {
      // console.log(value)
      switch (true) {
        case value === "0":
          this.tableDay();
          break;
      }
    },
    getAvg(columns, data) {
      const sums = [];
      const raw = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "小计";
          return;
        }
        let num = 0;
        const values = data.map((item) => Number(item[column]));
        if (!values.every((value) => isNaN(value))) {
          const sum = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          round(sums[index] = (sum / 10000), 2);
          raw[index] = sum;
        } else {
          sums[index] = "N/A";
        }
        if (!values.every((value) => isNaN(value))) {
          const sum = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] = sum;
        } else {
          sums[index] = "N/A";
        }
      });
      return sums;
    },
    tableDay() {
      this.loading = true;
      getReportOneDay1List(this.parseTime(new Date(this.value2))).then(response => {
        let data = response.data
        let column = {
          rtime: undefined,
          a1: undefined,
          a2: undefined,
          a3: undefined,
          a4: undefined,
          a5: undefined,
          a6: undefined,
          a7: undefined,
          a8: undefined,
          a9: undefined,
          a10: undefined,
          a11: undefined,
          a12: undefined,
          a13: undefined,
          a14: undefined,
          a15: undefined,
          a16: undefined,
          a17: undefined,
          a18: undefined,
          a19: undefined,
          a20: undefined,
          a21: undefined,
          a22: undefined,
          a23: undefined,
          a24: undefined,
          a25: undefined,
          a26: undefined,
          a27: undefined,
          a28: undefined,
          a29: undefined,
          a30: undefined,
          a31: undefined,
          a32: undefined,
          a33: undefined,
          a34: undefined,
          a35: undefined,
          a36: undefined,
          a37: undefined,
          a38: undefined,
          a39: undefined,
          a40: undefined,
          a41: undefined,
          a42: undefined,
          a43: undefined,
          a44: undefined,
          a45: undefined,
          a46: undefined,
          a47: undefined,
          a48: undefined,
          a49: undefined,
          a50: undefined,
          a51: undefined,
          a52: undefined,
          a53: undefined,
          a54: undefined,
          a55: undefined,
          a56: undefined,
          a57: undefined,
          a58: undefined,
          a59: undefined,
          a60: undefined,
          a61: undefined,
          a62: undefined,
          a63: undefined,
          a64: undefined,
          a65: undefined,
          a66: undefined,
          a67: undefined,
          a68: undefined,
          a69: undefined,
          a70: undefined,
          a71: undefined,
          a72: undefined,
          a73: undefined,
          a74: undefined,
          a75: undefined,
          a76: undefined,
          a77: undefined,
          a78: undefined,
          a79: undefined,
          a80: undefined,
          a81: undefined,
          a82: undefined,
          a83: undefined,
          a84: undefined,
          a85: undefined,
          a86: undefined,
          a87: undefined,
          a88: undefined,
          a89: undefined,
          a90: undefined,
          a91: undefined,
          a92: undefined,
          a93: undefined,
          a94: undefined,
          a95: undefined,
          a96: undefined,
          a97: undefined,
          a98: undefined,
          a99: undefined,
          a100: undefined,
          a101: undefined,
          a102: undefined,
          a103: undefined,
          a104: undefined,
          a105: undefined,
          a106: undefined,
          a107: undefined,
          a108: undefined,
          a109: undefined,
          a110: undefined,
          a111: undefined,
          a112: undefined,
          a113: undefined,
          a114: undefined,
          a115: undefined,
          a116: undefined,
          a117: undefined,
          a118: undefined,
          a119: undefined,
          a120: undefined,
          a121: undefined,
          a122: undefined,
          a123: undefined,
          a124: undefined,
          a125: undefined,
          a126: undefined,
          a127: undefined,
          a128: undefined,
          a129: undefined,
          a130: undefined,
          a131: undefined,
          a132: undefined,
          a133: undefined,
          a134: undefined,
          a135: undefined,
          a136: undefined,
          a137: undefined,
          a138: undefined,
          a139: undefined,
          a140: undefined,
          a141: undefined,
          a142: undefined,
          a143: undefined,
          a144: undefined,
          a145: undefined,
          a146: undefined,
          a147: undefined,
          a148: undefined,
          a149: undefined,
          a150: undefined,
        };
        let arr = [];
        let nums1 = [];
        const distinctArr = [];
        for (let i = 0; i < data.length; i++) {// 去重
            if (distinctArr.indexOf(JSON.parse(JSON.stringify(parseInt(parseTime(data[i].rtime))))) === -1) {
              distinctArr.push(data[i]);
            }
        }
        for (let j = 0; j < distinctArr.length; j++) {
          nums1.push(JSON.parse(JSON.stringify(parseInt(parseTime(distinctArr[j].rtime, "{h}")))));
        }
        for (let i = 0; i < 24; i++) {
          let s1 = nums1.indexOf(i);
          if (s1 !== -1) {
            column = data[s1];
          } else {
            for (let key in column) {
              column[key] = "";
            }
          }
          column.rtime = i + ":00-" + (i + 1) + ":00";
          arr.push(JSON.parse(JSON.stringify((column))));
        }
        const keys = Object.keys(column);
        const sum = this.getAvg(keys, arr);
        for (let i = 0; i < keys.length; i++) {
          column[keys[i]] = sum[i];
        }
        arr.push(JSON.parse(JSON.stringify(column)));
        this.tableData = arr;
        this.loading = false;
      });
    },
    /** 导出按钮操作 */
    handleDownload() {
      // 处理查询参数
      let params = { ...this.queryParams };
      params.pageNo = undefined;
      params.pageSize = undefined;
      this.$modal.confirm('是否确认导出所有月报数据项?').then(() => {
        this.exportLoading = true;
        return exportReportMonthExcel(params);
      }).then(response => {
        this.$download.excel(response, '月报.xls');
        this.exportLoading = false;
      }).catch(() => { });
    }
  }
}
</script>
